<template>
  <div class="userinfo">
    <el-row class="border-display">
      <span class="margin-right">姓名: {{ infoData.name }}</span>
      <span class="margin-right">性别: {{ infoData.sex }}</span>
      <span class="margin-right">年龄: {{ infoData.age }}</span>
      <span class="margin-right">会员号: {{ infoData.code }}</span>
      <!-- <el-col :span="4">姓名: {{ infoData.name }}</el-col>
      <el-col :span="3">性别: {{ infoData.sex }}</el-col>
      <el-col :span="3">年龄: {{ infoData.age }}</el-col>
      <el-col :span="10">会员号: {{ infoData.code }}</el-col> -->
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    infoId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      infoData: {},
    };
  },
  watch: {
    infoId: {
      handler(newId) {
        this.fetchUserInfo(newId);
      },
    },
  },
  mounted() {
    this.fetchUserInfo(this.infoId);
  },
  methods: {
    fetchUserInfo(id) {
      if (!id) return false;
      this.$api['department/order/customer']({ id }).then(res => {
        if (res.code !== 200) return;
        this.infoData = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
  .el-row {
    line-height: 30px;
  }
  .userinfo{
    margin-bottom: 20px;
  }
  .margin-right{
    margin-right: 50px;
    font-size: 12px;
  }
  .border-display{
    border-bottom: 1px solid
  }
</style>
